<template>
	<view class="content">
		<!--搜索栏-->
		<view class="search-bar" @tap="$Router.push('/pages/member/helpSearch')">
			<text class="iconfont icon-sousuo"></text>
			<text class="text">输入您的问题</text>
		</view>

		<!--问题列表-->
		<view class="faq-content">
			<!--侧边栏-->
			<view class="side-list">
				<view
					class="side-item"
					:class="[{ active: active === index }]"
					v-for="(item, index) in faqList"
					:key="index"
					@tap="changeSelect(item, index)"
				>
					<view class="line"></view>
					{{ item.name }}
				</view>
			</view>

			<!--内容-->
			<view class="faq-list" v-if="faqList.length > 0">
				<view
					class="faq-item"
					v-for="(item, index) in faqList[active].list"
					:key="index"
					@tap="toHelpDetail(item)"
				>
					<text class="fqa-name">{{ item.title }}</text>
					<text class="iconfont icon-xiayiye"></text>
				</view>
			</view>
		</view>

		<!--底部按钮-->
		<view class="footer-bar">
			<view class="call-service" @tap="$Router.push('/pages/member/service')">联系客服</view>
		</view>

		<!--智能搜索-->
		<ai-search ref="aiSearch"></ai-search>
	</view>
</template>

<script>
export default {
	name: 'help',
	data() {
		return {
			faqList: [],
			active: 0,
			options: {}
		};
	},
	onLoad(options) {
		this.options = options;
		this.init();
	},
	onShow() {
		this.$nextTick(() => {
			uni.getClipboardData({
				success: res => {
					if (res.data && this.$store.state.common.aiSearch) {
						this.$refs.aiSearch.open(res.data);
						this.$store.commit({
							type: 'setAiSearch',
							aiSearch: false
						});
					}
				}
			});
		});
	},
	onHide() {
		this.$refs.aiSearch.close();
	},
	methods: {
		init() {
			this.$service.member.faq
				.page().then(res => {
					uni.stopPullDownRefresh();
					this.faqList = res;
					
					res.forEach((item, index) => {
						if (item.name === this.options.name) {
							this.active = index;
						}
					})
				});
		},
		// 切换选中
		changeSelect(item, index) {
			this.active = index;
		},
		toHelpDetail(item) {
			uni.setStorageSync('helpItem', item);
			this.$Router.push('/pages/member/helpDetail');
		}
	},
	onPullDownRefresh() {
		this.init();
	}
};
</script>

<style lang="scss" scoped>
.content {
	height: 100vh;
	background: #fff;
	@include flexBox(null, null, column);
	.search-bar {
		width: 654rpx;
		height: 64rpx;
		margin: 16rpx auto;
		background: #f6f6f6;
		border-radius: 50rpx;
		padding: 12rpx 26rpx;
		box-sizing: border-box;
		@include flexBox(flex-start, center);
		color: #b2b2b2;
		.iconfont {
			font-size: 38rpx;
			margin-right: 10rpx;
		}
		.text {
			font-size: 28rpx;
		}
	}
	.faq-content {
		flex: 1;
		height: 100%;
		@include flexBox(space-between, flex-start);
		.side-list {
			height: 100%;
			width: 202rpx;
			overflow: auto;
			background: $bg-grey-second;
			.side-item {
				line-height: 108rpx;
				font-size: 28rpx;
				color: #57575d;
				text-align: center;
				position: relative;
				transition: 0.8s;
				border-bottom: 2rpx solid #edeeef;
				background: $bg-grey-second;
				.line {
					opacity: 0;
					background: $main-color;
					height: 82rpx;
					width: 8rpx;
					border-radius: 50rpx;
					position: absolute;
					left: 0;
					top: 50%;
					margin-top: -41rpx;
					transition: 0.3s;
				}
				&.active {
					border-color: $main-color;
					background: $bg-white;
					border-bottom: 2rpx solid #f6f6f6;
					.line {
						opacity: 1;
					}
				}
			}
		}
		.faq-list {
			flex: 1;
			overflow: auto;
			height: 100%;
			padding: 0 40rpx;
			.faq-item {
				padding: 28rpx 0;
				font-size: 28rpx;
				border-bottom: 2rpx solid #f3f4f6;
				@include flexBox(space-between, center);
				.iconfont {
					color: #c6c6c6;
				}
			}
		}
	}
	.footer-bar {
		width: 100%;
		padding: 20rpx 0;
		box-shadow: 0 -6rpx 12rpx rgba(0, 0, 0, 0.16);
		background: #fff;
		padding-bottom: constant(safe-area-inset-bottom);
		padding-bottom: env(safe-area-inset-bottom);
		@include flexBox(center, center);
		.call-service {
			width: 336rpx;
			line-height: 80rpx;
			background: $main-color;
			color: #fff;
			border-radius: 50rpx;
			font-size: 28rpx;
			text-align: center;
			margin-bottom: 20rpx;
		}
	}
}
</style>
